// 定义数组对象
var p1 = {
    productId: '201300001',
    productName: 'Lenove A820T',
    productPrice: 650,
    productDate: '2018-01-07',
    productStatus: true
}

var p2 = {
    productId: '201300007',
    productName: 'Acer 星锐 4750G',
    productPrice: 4000.8,
    productDate: '2019-09-02',
    productStatus: true
}

var p3 = {
    productId: '201300009',
    productName: 'ZTE U880',
    productPrice: 450,
    productDate: '2021-12-07',
    productStatus: false
}

// 定义初始化商品对象数组
var arr = [p1, p2, p3];

// 定义创建行，创建列的函数，将数据添加到列，将列添加到行，将行添加到表格
/**
 * 创建数据行
 * @param {*} table 表格
 * @param {*} p 当前行的数据
 */
function createTr(table, p) {
    // 第一：选择要操作的节点 / 创建相关节点

    // 创建 1 行
    var tr = $("<tr></tr>");

    // 创建 7 列
    var td1 = $("<td><input type='checkbox' class='ck'/></td>");

    var td2 = $("<td>" + p.productId + "</td>");

    var td3 = $("<td>" + p.productName + "</td>");

    var td4 = $("<td>" + p.productPrice + "</td>");

    var td5 = $("<td>" + p.productDate + "</td>");

    var td6 = $("<td><input type='checkbox' class='isDown' disabled/></td>");

    var td7 = $("<td><span class='del'>删除</span> <span class='showUpdate'>修改</span> <span class='showDetail'>详情</span></td>");

    // 第二：操作

    // 给 td6 复选框设置是否下架状态
    td6.find(".isDown")
        .prop("checked", p.productStatus);

    // 链式操作 - 将 td 节点添加到 tr 节点中
    tr.append(td1)
        .append(td2)
        .append(td3)
        .append(td4)
        .append(td5)
        .append(td6)
        .append(td7);

    // find()：找到 table 标签下的 tbody 标签，将 tr 节点添加到 tbody 中
    table.find("tbody").append(tr);

}

// 定义年份
function initYear() {
    // 根据当前时间获取当前年份
    var now = new Date();
    var year = now.getFullYear();

    // 循环创建 option 节点，并添加到 select 节点中
    for (i = year - 10; i < year + 10; i++) {
        $("#year").append("<option>" + i + "</option>");
    }

    // 页面加载时，希望年份默认选择当前年份
    $("#year option").filter(function () {
        return $(this).text() == year;
    }).prop("selected", true);
}

// 定义月份
function initMonth() {
    // 根据当前时间获取当前月份
    var month = new Date().getMonth() + 1;
    month = month < 10 ? '0' + month : month;

    // 循环创建 option 节点，并添加到 select 节点中
    for (i = 1; i <= 12; i++) {
        $("#month").append("<option>" + (i < 10 ? '0' + i : i) + "</option>");
    }

    // 页面加载时，希望月份默认选择当前月份
    $("#month option").filter(function () {
        return $(this).text() == month;
    }).prop("selected", true);

}
// 定义日期
function initDay(year, month) {
    //获取当前日期
    var date = new Date().getDate();
    date < 10 ? "0" + date : date;
    // 默认值为 28 天
    var day = 28;

    month = month * 1;
    switch (month) {
        case 1:
        case 3:
        case 5:
        case 7:
        case 8:
        case 10:
        case 12:
            day = 31
            break;
        case 4:
        case 6:
        case 9:
        case 11:
            day = 30
            break;
        default:
            //判断是否闰年，闰年 2 月 29 天，平年 2 月 28 天
            if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
                day = 29;
            }
            break;
    }

    // 循环创建 option 节点，并添加到 select 节点中
    for (i = 1; i <= day; i++) {
        $("#day").append("<option>" + (i < 10 ? '0' + i : i) + "</option>");
    }

    // 页面加载时，希望日期默认选择当前日期
    $("#day option").filter(function () {
        return $(this).text() == date;
    }).prop("selected", true);
}

/**
 * ==========初始化数据==========
 */
// 初始化数据
function initPage() {
    // 1.页面加载时，初始化表格数据
    for (var i = 0; i < arr.length; i++) {
        createTr($("#tbl"), arr[i]);
    }
    // 2.初始化年份
    initYear();
    // 3.初始化月份
    initMonth();
    // 4.初始化日期
    initDay(new Date().getFullYear(), new Date().getMonth() + 1);
}
initPage();

// change：下拉列表框发生切换时触发
// 切换年份，更新日期
$("#year").change(function () {
    var year = $(this).find("option:selected").text();
    var month = $("#month").find("option:selected").text();
    initDay(year, month);
})

// 切换月份，更新日期
$("#month").change(function () {
    var month = $(this).find("option:selected").text();
    var year = $("#year").find("option:selected").text();
    initDay(year, month);
})

// 还原表单的初始状态
function clearForm() {
    $("#product_id").val("");
    $("#product_name").val("");
    $("#product_price").val("");

    initYear();
    initMonth();

    var now = new Date();
    var y = now.getFullYear();
    var m = now.getMonth() + 1;
    initDay(y, m);

    $("input[name='product_status']:eq(0)").prop("checked", true);

    //将光标聚焦到 product_id 输入框
    $("#product_id").focus();

    // 还原表单状态
    $("input").prop("readonly", false)
    // 解除禁用
    $("select").prop("disabled", false)
    $("input[type=radio]").prop("disabled", false)
}

/**
 * ==========添加商品==========
 */
$("#btnAdd").click(function () {
    // 第一：获取表单中数据，并封装为商品对象
    // 年份
    var y = $("#year").find("option:selected").text();
    // 月份
    var m = $("#month").find("option:selected").text();
    // 日期
    var d = $("#day").find("option:selected").text();

    // 判断第一个 input name 为 product_status 是否被选中，返回 true 或 false ，单选框的状态
    var s = $("input[name='product_status']:eq(0)").prop("checked") == true ? true : false;

    var p = {
        productId: $("#product_id").val(),
        productName: $("#product_name").val(),
        productPrice: $("#product_price").val(),
        productDate: y + "-" + m + "-" + d,
        productStatus: s
    };

    // 第二：添加数据行
    var table = $("#tbl");
    createTr(table, p);

    // 第三：还原表单的初始状态
    clearForm();

    // 第四：是否全选
    isCheckAll();
});

/**
 * ==========删除商品==========
 */
//动态绑定事件
//父节点.on("事件","需要执行操作的子节点",function(){})
$("#tbl").on("click", ".del", function () {
    var bl = confirm("您确定删除吗？")
    if (bl) {
        // 获取当前行
        var tr = $(this).closest("tr");
        // 删除当前行
        tr.remove();
    }
});

/**
 * ==========批量删除商品==========
 */
$("#btnDels").click(function () {
    // 获取勾选的复选框
    var cks = $(".ck:checked");

    // 判断是否勾选
    if (cks.length == 0) {
        alert("请勾选要删除的商品！")
        return;
    }
    // 判断确定删除
    var bl = confirm("您真的要删除这 " + cks.length + " 条数据吗？");
    if (bl) {
        cks.closest("tr").remove();
    }
});

// 全选
$("#all").click(function () {
    // 设置各行第一列的复选框与全选复选框的状态一致
    $(".ck").prop("checked", $(this).prop("checked"));
});

/**
 * 判断是否全选，当表格中的所有数据行都选中时，全选复选框也选中
 */
function isCheckAll() {
    // 第一：获取第一列复选框选中的数量
    var ckLen = $(".ck:checked").length;
    // 第二：获取数据行的数量
    var trLen = $("#tbl").find("tr").length - 1;

    // 第三：判断当第一列复选框选中的数量与数据行数量一致时，全选复选框也选中，否则不选中
    if (ckLen != trLen) {
        $("#all").prop("checked", false);
        return;
    }
    $("#all").prop("checked", true);
}

// 检查全选状态
$("#tbl").on("click", ".ck", function () {
    isCheckAll();
});

/**
 * 回显修改和详情所在行的数据到表单中
 * @param {*} btn 
 */
function showData(btn) {
    //获取当前行
    var tds = btn.closest("tr").find("td");

    // 获取表格中的数据
    // 商品编号
    var productId = $(tds[1]).text();
    // 商品名称
    var productName = $(tds[2]).text();
    // 商品价格
    var productPrice = $(tds[3]).text();
    // 上货日期
    var productDate = $(tds[4]).text();

    // 2020-09-02  --- [2020,09,02]
    // 将日期拆分
    var arr = productDate.split("-");
    // 年、月、日
    var y = arr[0];
    var m = arr[1];
    var d = arr[2];

    // 获取单元格复选框的选择状态
    var productStatus = $(tds[5])
        .find("input")
        .prop("checked");

    // 回显数据
    $("#product_id").val(productId);
    $("#product_name").val(productName);
    $("#product_price").val(productPrice);

    // 回显年份、月份、日期
    $("#year option").filter(function () {
        return $(this).text() == y;
    }).prop("selected", true);
    $("#month option").filter(function () {
        return $(this).text() == m;
    }).prop("selected", true);
    $("#day option").filter(function () {
        return $(this).text() == d;
    }).prop("selected", true);

    if (productStatus) {
        $("#yes").prop("checked", true);
    } else {
        $("#no").prop("checked", true);
    }

}

/**
 * ==========回显修改商品==========
 */
$("#tbl").on("click", ".showUpdate", function () {
    // 第一：初始化表单
    // 将标题改为修改商品
    $("#title").text("修改商品");
    // 将添加按钮隐藏
    $("#btnAdd").hide(500);
    // 将修改按钮显示
    $("#btnUpdate").show(500);

    $("input").prop("readonly", false)
    // 设置禁用
    $("select").prop("disabled", false)
    $("input[type=radio]").prop("disabled", false)

    // 设置只读
    $("#product_id").prop("readonly", true)

    // 第二：回显数据 
    // $(this) - 修改按钮
    showData($(this));
});

/**
 * ==========双击表单，还原添加商品==========
 */
$("#containner form").dblclick(function () {
    //初始化表单
    $("#title").text("商品添加");
    $("#btnAdd").show(500);
    $("#btnUpdate").hide(500);

    // 还原表单
    clearForm();
});

/**
 * ==========查看商品详情==========
 */
$("#tbl").on("click", ".showDetail", function () {
    // 第一：初始化表单
    $("#title").text("商品详情");
    $("#btnAdd").hide(500);
    $("#btnUpdate").hide(500);

    // 设置只读
    $("input").prop("readonly", true)
    // 设置禁用
    $("select").prop("disabled", true)
    $("input[type=radio]").prop("disabled", true)

    // 第二：回显数据 
    // $(this) - 详情按钮
    showData($(this));
});

/**
 * ==========修改商品==========
 */
$("#btnUpdate").click(function () {
    // 第一：获取表单中的数据
    // 年份
    var y = $("#year").find("option:selected").text();
    // 月份
    var m = $("#month").find("option:selected").text();
    // 日期
    var d = $("#day").find("option:selected").text();

    var productId = $("#product_id").val();
    var productName = $("#product_name").val();
    var productPrice = $("#product_price").val();
    var productDate = y + "-" + m + "-" + d;
    var productStatus = $("input[name='product_status']:eq(0)").prop("checked") == true ? true : false;

    // 第二：查找数据 - 查找修改数据所在行
    var trs = $("#tbl tr:not(:eq(0))");
    for(var i =0;i<trs.length;i++){
        // 获取各行第二列的商品编号
        var pid = $($(trs[i]).find("td")[1]).text();
        // 判断，找到的数据所在行
        if(pid ==productId){
            // 获取当前行的各列节点
            var tds = $(trs[i]).find("td");
            // 第三：修改数据 - 把各列的数据修改为表单输入的数据
            $(tds[2]).text(productName);
            $(tds[3]).text(productPrice);
            $(tds[4]).text(productDate);
            $(tds[5]).find("input").prop("checked",productStatus);
            break;
        } 
    }
    // 还原表单
    clearForm();
    $("#title").text("商品添加");
    $("#btnAdd").show(500);
    $("#btnUpdate").hide(500);
});




